<template>
  <view class="career-book-container" id="CareerBook">
    <view class="text-img-box">
      <image class="text-img" :src="partTextImgUrl" />
    </view>
    <view class="content-back-box">
      <view class="content-back">
        <view class="content-title">
          <text class="black-box"> </text>
          <text class="small-title-green">
            {{ protectorName }}提供你
            <text class="spe-text">选择职业获得职业报告</text>
          </text>
        </view>
        <view class="career-report-book" v-if="!reportList.length">
          <image class="sample-img" :src="sampleImg"></image>
          <view class="book-box">
            <image class="report-book" :src="booksSample"></image>
          </view>
          <view class="operate" @click="showPositionList">选择你要获得宝典的职业</view>
        </view>
        <view class="career-report-book" v-else>
          <image class="report-img" :src="hasProducedBtn"></image>
          <view class="report-container">
            <view class="book-box" v-for="item in reportList" :key="item.ylPositionId" @click="handleViewReport(item)">
              <image class="book" :src="item.coverImg"></image>
              <view class="name">{{ item.positionName }}</view>
            </view>
          </view>
        </view>
        <image :src="bottomImg" class="bottom-img" />
      </view>
    </view>
    <u-popup v-model="show" mode="bottom" :closeable="true" close-icon-size="34" close-icon-color="#d4d4d4"
      :safe-area-inset-bottom="true">
      <view class="pop-wrapper">
        <view class="header">想选择哪些职业生成宝典？</view>
        <scroll-view scroll-y="true" class="scroll" style="height: 370rpx">
          <view class="list">
            <view :class="['list-item', item.check ? 'checked' : 'not-checked']" v-for="(item, index) in positionList"
              :key="item.value" :style="{ marginRight: (index + 1) % 3 == 0 ? '0rpx' : '22rpx' }"
              @click="handleSelectPosition(item)">{{ item.key }}</view>
          </view>
        </scroll-view>
        <view class="selected">
          <text class="text">已选择</text>
          <text class="number"><text :style="{
                color: showChecked ? '#f75a3e' : '#bfbfbf',
              }">{{ selectedList.length }}</text>/3</text>
        </view>
        <scroll-view scroll-x="true" v-if="selectedList.length" style="width: 100%; height: 120rpx">
          <view class="selected-list">
            <view class="selected-item" v-for="(item, index) in selectedList" :key="item.value"
              :style="{ marginRight: (index + 1) % 3 == 0 ? '0rpx' : '20rpx' }"><text class="text">{{ item.key }}</text>
              <image class="close" :src="orangeClose" @click="handleClickClose(item, index)">
              </image>
            </view>
          </view>
        </scroll-view>
        <view class="operate" @click="handleConfirm">选好了</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  getCareerQuizReport,
  careerQuizRelReport,
  careerList,
  deliverSaveResult,
} from "@/api/modules/career";
export default {
  props: {
    careerNames: {
      type: Array,
      default: () => [],
    },
    protectorName: {
      type: String,
      default: "",
    },
    personId: {
      type: String,
      default: "",
    },
  },
  watch: {
    careerNames: {
      handler(val) {
        if (val.length) {
          let careerNames = [];
          val.forEach((item) => {
            careerNames = [...careerNames, ...item.careerList];
          });
          this.careerListFn(careerNames.join(","));
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      bgUrl:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessResult/bg_part3_1.png",
      partTextImgUrl:
        this.$imgBaseSelf + "career/careerAssessNew/careerBookTitleNew.png?v=1",
      sampleImg: this.$imgBaseSelf + "career/careerAssessNew/sampleImg.png",
      hasProducedBtn:
        this.$imgBaseSelf + "career/careerAssessNew/hasProducedBtn.png",
      booksSample: this.$imgBaseSelf + "career/careerAssessNew/booksSample.png",
      bottomImg:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessNew/bottom.png",
      orangeClose:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessNew/orangeClose.png",
      show: false,
      showChecked: false,
      positionList: [],
      reportList: [],
      selectedList: [],
    };
  },
  mounted() {
    this.getCareerQuizReportFn();
    uni
      .createSelectorQuery()
      .in(this)
      .select(".career-book-container")
      .boundingClientRect((rect) => {
        this.$emit("listenRect", rect, 8);
      })
      .exec();
  },
  methods: {
    handleViewReport(item) {
      uni.navigateTo({
        url: `/pagesSub/career/careerReportDetail/index?ylPositionId=${item.ylPositionId}&positionName=${item.positionName}`,
      });
    },
    careerListFn(careerNames) {
      const params = {
        careerNames,
      };
      careerList(params).then((res) => {
        if (res.code == 200 && Array.isArray(res.data)) {
          res.data.forEach((item) => {
            item.check = false;
          });
          this.positionList = res.data;
        }
      });
    },
    handleClickClose(item, index) {
      this.selectedList.splice(index, 1);
      const temp = this.positionList.find((_item) => _item.value == item.value);
      if (temp) {
        temp.check = false;
      }
      this.showChecked = this.selectedList.length ? true : false;
    },
    handleSelectPosition(item) {
      if (this.selectedList.length >= 3 && !item.check) {
        uni.showToast({ icon: "none", title: "最多只能选择三种职业喔~", duration: 2000 });
        return;
      }
      item.check = !item.check;
      if (item.check) {
        this.selectedList.splice(0, 0, item);
      } else {
        const index = this.selectedList.findIndex(
          (_item) => _item.value == item.value
        );
        this.selectedList.splice(index, 1);
      }
      this.showChecked = this.selectedList.length ? true : false;
    },
    handleConfirm() {
      if (!this.selectedList.length) {
        uni.showToast({ icon: "none", title: "请至少选择一个职业喔~", duration: 2000 });
        return;
      }
      let ylPositionIdList = [];
      let list = [];
      this.selectedList.forEach((item) => {
        ylPositionIdList.push(item.value);
        list.push({
          positionId: item.value,
          positionName: item.key,
        });
      });
      const params = {
        dataId: this.personId,
        dataType: 1, // 职途职业测评
        templateCode: "career_report",
        ylPositionIdList,
      };
      careerQuizRelReport(params)
        .then((res) => {
          if (res.code == 200) {
            this.getCareerQuizReportFn();
          }
        })
        .finally(() => {
          this.show = false;
        });
      // this.deliverSaveResultFn(list);
    },
    deliverSaveResultFn(list) {
      const params = {
        rightId: 9,
        personId: this.personId,
        list,
      };
      deliverSaveResult(params).then((res) => {});
    },
    getCareerQuizReportFn() {
      const params = {
        dataId: this.personId,
        dataType: 1,
        templateCode: "career_report",
      };
      getCareerQuizReport(params).then((res) => {
        if (res.code == 200 && Array.isArray(res.data)) {
          this.reportList = res.data;
        }
      });
    },
    showPositionList() {
      this.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.career-book-container {
  position: relative;
  padding-bottom: 60rpx;
  width: 100%;
  min-height: 700rpx;
  background-size: 100% auto;
  background-image: url($img-base + "career/careerAssessResult/bg_part3_1.png");
  background-repeat: no-repeat;
  .content-back-box {
    padding: 0 32rpx;
    .content-back {
      position: relative;
      width: 100%;
      margin-top: -10rpx;
      background: linear-gradient(
        to bottom,
        #f5cb83 0%,
        #fefdeb 50rpx,
        #f6f4df 80rpx,
        #f7f6e2 100%
      );
      padding: 20rpx 0 74rpx 0;
      border-radius: 20rpx 0 0 0;
      .content-title {
        margin-top: 33rpx;
        display: flex;
        align-items: center;
        .black-box {
          width: 10rpx;
          height: 37rpx;
          margin-right: 20rpx;
          background: #000;
          color: #000;
          font-size: 26rpx;
          margin-top: 4rpx;
        }
        .small-title-green {
          font-size: 34rpx;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #000;
          .spe-text {
            color: #ef7240;
          }
        }
      }
      .career-report-book {
        .sample-img {
          width: 74rpx;
          height: 39rpx;
          margin-top: 37rpx;
        }
        .book-box {
          display: flex;
          justify-content: center;
          margin: 32rpx 0 39rpx 0;
          .report-book {
            width: 602rpx;
            height: 361rpx;
          }
        }
        .operate {
          width: 622rpx;
          height: 88rpx;
          background: #49be7b;
          box-shadow: 0rpx 12rpx 25rpx 2rpx rgba(227, 224, 172, 0.75);
          border-radius: 6rpx;
          color: #fff;
          margin-top: 32rpx;
          line-height: 88rpx;
          text-align: center;
          font-size: 32rpx;
          margin: 0 auto;
          font-weight: 600;
        }

        .report-img {
          width: 228rpx;
          height: 39rpx;
          margin: 34rpx 0 33rpx 0;
        }
        .report-container {
          display: flex;
          justify-content: space-around;
          .book-box {
            display: flex;
            flex-direction: column;
            width: 202rpx;
            .book {
              width: 202rpx;
              height: 285rpx;
              box-shadow: 0rpx 12rpx 29rpx 6rpx rgba(228, 228, 219, 0.96);
            }
            .name {
              margin-top: 42rpx;
              font-size: 26rpx;
              color: #8c795d;
              font-weight: bold;
            }
          }
        }
      }
      .bottom-img {
        position: absolute;
        width: 100%;
        height: 40rpx;
        right: 0rpx;
        bottom: 0rpx;
      }
    }
  }
  .text-img-box {
    display: flex;
    justify-content: flex-end;
    .text-img {
      height: 130rpx;
      width: 584rpx;
      image-rendering: -webkit-optimize-contrast;
      z-index: 9;
      position: relative;
    }
  }
  .pop-wrapper {
    ::v-deep .u-close--top-right {
      top: 50rpx;
      right: 32rpx;
    }
    .header {
      font-size: 48rpx;
      color: #333;
      font-weight: 600;
      padding: 30rpx 32rpx 0 32rpx;
    }
    .scroll {
      margin: 60rpx 0 66rpx 0;
      padding: 0 32rpx;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      &-item {
        width: 214rpx;
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        border-radius: 2rpx;
        font-size: 28rpx;
        margin-right: 22rpx;
        margin-bottom: 20rpx;
      }
      .checked {
        color: #f75a3e;
        background-color: #fff1ea;
      }
      .not-checked {
        color: #555;
        background-color: #f5f5f5;
      }
    }
    .selected {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32rpx 0;
      .text {
        color: #333;
        font-size: 36rpx;
      }
      .number {
        font-size: 44rpx;
        color: #555555;
        .checked {
          color: #f75a3e;
        }
        .not-checked {
          color: #bfbfbf;
        }
      }
    }
    .selected-list {
      display: flex;
      margin-top: 32rpx;

      .selected-item {
        padding: 12rpx 0 12rpx 48rpx;
        background-color: #fff1ea;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        border-radius: 2rpx;
        &:nth-of-type(1) {
          margin-left: 32rpx;
        }
        .text {
          font-size: 28rpx;
          color: #f75a3e;
        }
        .close {
          width: 18rpx;
          height: 16rpx;
          padding: 12rpx 28rpx 12rpx 28rpx;
        }
      }
    }
    .operate {
      width: 686rpx;
      color: #fff;
      background-color: #f75a3e;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      margin: 76rpx 32rpx 0 32rpx;
      border-radius: 8rpx;
    }
  }
}
</style>
